/*
 * @Author: luoqi
 * @Date: 2022-03-27 15:10:18
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 10:19:45
 * @Description: 
 */
import React,{useEffect,useState} from 'react';
import {Row,Col,Form,Input,Button, message} from 'antd'
import './style.css'
import loginImg from  '../../utils/img/login.png'
import logo from  '../../utils/img/logo.png'
import {useNavigate} from 'react-router-dom'

import axios from '../../utils/axios'
import qs from 'qs';

const Login = () => {
  let navigate=useNavigate()
  let [form]=Form.useForm()
  //获取验证码
  let [captcha,setCaptcha]=useState()
  //验证码
  let [img,setImg]=useState()
  //验证码key
  let [key,setKey]=useState()
  useEffect(()=>{
    getCaptcha()
  },[captcha])
  //获取验证码
  function getCaptcha(){
    axios({
      url:'/admin/getCaptcha',
      method:'post',
    }).then(res=>{
      console.log(res);
      //登录成功
      if(res.code=='200'){
        setImg(res.image)
        setKey(res.key)
      }
    }).catch(res=>{
      message.error('请求错误：'+res.message);
    })
  }
  //登录
  const onFinish = (values) => {
    // console.log('Success:', values);
    axios({
      url:'/admin/login',
      method:'post',
      data:qs.stringify({
        phone:values.phone.trim(),
        password:values.password.trim(),
        key:key,
        code:values.code
      })
    }).then(res=>{
      console.log(res);
      //登录成功
      if(res.code=='200'){
        //存储token
        sessionStorage.setItem('token',res.token)
        //存储用户信息
        sessionStorage.setItem('userinfo',JSON.stringify(res.data))
        //页面跳转
        navigate('/main/home')
        message.success('登录成功!');
      }else{
        message.warning(res.msg);
        form.resetFields()
      }
    }).catch(res=>{
      message.error('请求错误：'+res.message);
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div style={{background:'#374081',height:'100%'}} >
    {/* 背景图片 */}
    {/* <div >
      <img className='bgc-img' src={loginImg} alt=""  />
    </div> */}
    <Row justify="center" align="middle" style={{height:'100%'}}>
      <Col span={8} offset={5} style={{overflow:'hidden',height:'500px'}}>
      <img  src={loginImg} alt=""  />
      </Col>
      <Col span={6} className='right'>
      <Row  justify="space-around" align="middle" className="login-box">
      <Col  >
        <div>
        <img  src={logo} alt=""  style={{width:'150px',marginLeft:'50px'}}/>
          <h3 style={{color:'#382c77',fontWeight:'bold'}}>“疾病档案”健康科普网站后台管理系统</h3>
          <Form
            name="basic"
            form={form}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            initialValues={{ phone:'13056540908',password:'666666'}}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="手机号"
              name="phone"
              rules={[{ required: true, message: '请输入手机号!' }]}
            >
              <Input/>
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password  />
            </Form.Item>

            {/* 验证码 */}
            <Row>
              <Col span={15}>
              <Form.Item
              label="验证码"
              name="code"
              labelCol={{span:10}}
              rules={[{ required: true, message: '请输入验证码!' }]}
            >
              <Input  style={{width:'100px'}}/>
            </Form.Item>
              </Col>
              <Col span={9}>
                <img src={img} onClick={getCaptcha}/>
              </Col>
            </Row>
            

            <Form.Item wrapperCol={{ span: 24 }}>
              <Button type="primary" htmlType="submit" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Col>
      <Col span={9}/>
    </Row>
      </Col>
      <Col span={5} ></Col>
    </Row>
    
    </div>
  );
}

export default Login;
